import { useState, useEffect } from 'react';
import { post, get } from '../services/api';
import { Form, Input, Button, Space, Card, Select, message } from 'antd';

function ClassForm({ onClose, onSuccess }) {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);
  const [courses, setCourses] = useState([]);

  useEffect(() => {
    // 获取课程列表
    const fetchCourses = async () => {
      try {
        const data = await get('courses');
        setCourses(data);
      } catch (error) {
        console.error('获取课程列表失败:', error);
      }
    };
    fetchCourses();
  }, []);

  const handleSubmit = async (values) => {
    setLoading(true);
    try {
      await post('classes', values);
      message.success('班级添加成功');
      form.resetFields();
      onClose();
      if (onSuccess) onSuccess(); // 刷新父组件数据
    } catch (error) {
      console.error('添加班级失败:', error);
      message.error('添加失败，请重试');
    } finally {
      setLoading(false);
    }
  };

  return (
    <Card
      style={{
        marginBottom: 24,
        boxShadow: '0 1px 2px rgba(0, 0, 0, 0.1)',
      }}
    >
      <Form
        form={form}
        layout="vertical"
        onFinish={handleSubmit}
        initialValues={{
          class_name: '',
          semester: '',
          location: '',
          course_id: null,
        }}
      >
        <Form.Item
          name="class_name"
          label={<span style={{ fontSize: '16px' }}>班级名称</span>}
          rules={[{ required: true, message: '请输入班级名称！' }]}
        >
          <Input placeholder="请输入班级名称" style={{ fontSize: '16px' }} />
        </Form.Item>

        <Form.Item
          name="semester"
          label={<span style={{ fontSize: '16px' }}>学期</span>}
          rules={[{ required: true, message: '请选择学期！' }]}
        >
          <Select placeholder="请选择学期" style={{ fontSize: '16px' }}>
            <Select.Option value="2023-2024-1">2023-2024学年第一学期</Select.Option>
            <Select.Option value="2023-2024-2">2023-2024学年第二学期</Select.Option>
            <Select.Option value="2024-2025-1">2024-2025学年第一学期</Select.Option>
            <Select.Option value="2024-2025-2">2024-2025学年第二学期</Select.Option>
            <Select.Option value="2025-2026-1">2025-2026学年第一学期</Select.Option>
          </Select>
        </Form.Item>

        <Form.Item
          name="location"
          label={<span style={{ fontSize: '16px' }}>教室</span>}
          rules={[{ required: true, message: '请输入教室！' }]}
        >
          <Input placeholder="请输入教室" style={{ fontSize: '16px' }} />
        </Form.Item>

        <Form.Item
          name="course_id"
          label={<span style={{ fontSize: '16px' }}>课程</span>}
          rules={[{ required: true, message: '请选择课程！' }]}
        >
          <Select placeholder="请选择课程" style={{ fontSize: '16px' }}>
            {courses.map(course => (
              <Select.Option key={course.course_id} value={course.course_id}>
                {course.course_name} ({course.course_id})
              </Select.Option>
            ))}
          </Select>
        </Form.Item>

        <Form.Item>
          <Space>
            <Button type="primary" htmlType="submit" loading={loading} style={{ fontSize: '16px' }}>
              添加班级
            </Button>
            <Button onClick={onClose} style={{ fontSize: '16px' }}>取消</Button>
          </Space>
        </Form.Item>
      </Form>
    </Card>
  );
}

export default ClassForm;